<template>
  <div class="setting_page">
    <el-form ref="form" label-width="200px">
      <el-form-item label="申请条件:">
        <el-radio-group v-model="applyCondition" @change="applyConditions">
          <p class="radiop">
            <el-radio :label="1">购买任意商品</el-radio>
          </p>
          <p class="radiop">
            <el-radio :label="2">
              至少下单满
              <el-input v-model="text" maxlength="9" :disabled="disabled" />单
            </el-radio>
          </p>
          <p class="radiop">
            <el-radio :label="3">
              消费金额满
              <el-input v-model="text1" maxlength="9" :disabled="disabled1" />元
            </el-radio>
          </p>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="审核设置：">
        <el-radio-group v-model="auditFlag" @change="auditFlags">
          <el-radio :label="0">无需审核自动成为分销</el-radio>
          <el-radio :label="1">需要审核</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label-width="100" style="padding-left: 120px">
        <el-button plain @click="cancel">取消</el-button>
        <el-button type="primary" :loading="saveLoading" @click="subm">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, onBeforeMount } from 'vue'
import { getByShopId, recruitAdd, recruitUpdate } from '@/api/distributor'
import useClipboard from 'vue-clipboard3'

const { toClipboard } = useClipboard()
const text = ref('')
const text1 = ref('')
const disabled = ref(true)
const disabled1 = ref(true)
const saveLoading = ref(false)
const first = ref(true)
const relationQuery = ref({
  current: 1,
  map: {},
  model: {},
  order: 'descending',
  size: 10,
  sort: 'id'
})
const applyCondition = ref(1)
const auditFlag = ref(0)
const relationItem = ref({})
const updataQuery = ref({
  applyCondition: '',
  applyDetail: '',
  auditFlag: '',
  expireTime: '',
  id: '',
  isCanInvite: '',
  isForeverValid: '',
  protectTime: '',
  rebindCustomerFlag: '',
  salesBindFalg: '',
  selfBuyReturnCommisionFlag: ''
})

onBeforeMount(() => {
  salesRelationConfig()
})
// 关系设置
const salesRelationConfig = async () => {
  const res = await getByShopId({})
  if (JSON.stringify(res.data) === '{}') {
    first.value = true
  } else {
    first.value = false
    applyCondition.value = res.data.condition
    auditFlag.value = res.data.ifExamine
    text.value = res.data.frequency || ''
    text1.value = res.data.money || ''
    updataQuery.value.id = relationItem.value.id
    updataQuery.value.auditFlag = relationItem.value.auditFlag
    updataQuery.value.applyCondition = relationItem.value.applyCondition
  }
}
const applyConditions = (e) => {
  if (e === 1) {
    disabled.value = true
    disabled1.value = true
    text1.value = ''
    text.value = ''
  } else if (e === 2) {
    disabled.value = false
    disabled1.value = true
  } else if (e === 3) {
    disabled.value = true
    disabled1.value = false
  }
  relationQuery.value.model.applyCondition = e
}
const auditFlags = (e) => {
  relationQuery.value.model.auditFlag = e
}
// 复制链接
const copy = async (text) => {
  try {
    await toClipboard(text) // 实现复制
    ElMessage.success('复制成功')
  } catch (e) {
    ElMessage.error('复制失败')
  }
}
// 取消
const cancel = () => {
  ElMessage({
    message: '已取消',
    type: 'success',
  })
}
// 保存
const subm = async () => {
  const obj = {
    condition: applyCondition.value,
    frequency: text.value, // 下单次数
    money: text1.value, // 消费金额
    ifExamine: auditFlag.value, // 是否需要审核 1-是 0-否
    url: '', // 招募页链接
  }
  if (first.value) {
    try {
      saveLoading.value = true
      const res = await recruitAdd(obj)
      if (res.code === '') {
        ElMessage.success('新增成功')
      }
    } finally {
      saveLoading.value = false
    }
  } else {
    try {
      saveLoading.value = true
      const res = await recruitUpdate(obj)
      if (res.code === '') {
        ElMessage.success('编辑成功')
      }
    } finally {
      saveLoading.value = false
    }
  }
}
</script>

<style lang="scss" scoped>
.setting_page {
  padding: 20px 0;
}
p {
  margin: 0;
  padding: 0;
}
.el-radio-group {
  display: block;
}

:deep(.el-input) {
  width: 80px;
  margin: 0 10px;
}
</style>
